import { Suspense, lazy } from 'react';
import { Navigate, Outlet } from 'react-router-dom';

import { SvgIcon } from '@/components/icon';
import { CircleLoading } from '@/components/loading';

import { AppRouteObject } from '#/router';

const ListPage = lazy(() => import('@/pages/member/list'));
const AccountPage = lazy(() => import('@/pages/member/account'));
const FundPage = lazy(() => import('@/pages/member/fund'));
const AddressPage = lazy(() => import('@/pages/member/address'));
const LevelPage = lazy(() => import('@/pages/member/level'));
// const PicturePage = lazy(() => import('@/pages/member/picture'));
const RechargePage = lazy(() => import('@/pages/member/recharge'));
const WithdrawPage = lazy(() => import('@/pages/member/withdraw'));
const ApplyPage = lazy(() => import('@/pages/member/apply'));
const MessagePage = lazy(() => import('@/pages/member/message'));
const OfflinePage = lazy(() => import('@/pages/member/offline'));
// const CollectPage = lazy(() => import('@/pages/member/collect'));
// const DesignPage = lazy(() => import('@/pages/member/design'));
const member: AppRouteObject = {
  order: 2,
  path: 'member',
  element: (
    <Suspense fallback={<CircleLoading />}>
      <Outlet />
    </Suspense>
  ),
  meta: {
    label: '会员管理',
    icon: <SvgIcon icon="ic-management" className="ant-menu-item-icon" size="24" />,
    key: '/member',
  },
  children: [
    {
      index: true,
      element: <Navigate to="list" replace />,
    },
    {
      path: 'list',
      element: <ListPage />,
      meta: { label: '会员列表', key: '/member/list' },
    },
    {
      path: 'account',
      element: <AccountPage />,
      meta: { label: '资金账号', key: '/member/account' },
    },
    {
      path: 'fund',
      element: <FundPage />,
      meta: { label: '资金流水', key: '/member/fund' },
    },
    {
      path: 'address',
      element: <AddressPage />,
      meta: { label: '收货地址', key: '/member/address' },
    },
    {
      path: 'level',
      element: <LevelPage />,
      meta: { label: '会员等级', key: '/member/level' },
    },

    {
      path: 'recharge',
      element: <RechargePage />,
      meta: { label: '充值记录', key: '/member/recharge' },
    },
    {
      path: 'withdraw',
      element: <WithdrawPage />,
      meta: { label: '提现记录', key: '/member/withdraw' },
    },
    {
      path: 'apply',
      element: <ApplyPage />,
      meta: { label: '升级申请记录', key: '/member/apply' },
    },
    // {
    //   path: 'picture',
    //   element: <PicturePage />,
    //   meta: { label: '会员图片', key: '/member/picture' },
    // },
    // {
    //   path: 'design',
    //   element: <DesignPage />,
    //   meta: { label: '会员设计', key: '/member/design' },
    // },
    // {
    //   path: 'collect',
    //   element: <CollectPage />,
    //   meta: { label: '会员收藏', key: '/member/collect' },
    // },
    {
      path: 'message',
      element: <MessagePage />,
      meta: { label: '会员消息', key: '/member/message' },
    },
    {
      path: 'offline',
      element: <OfflinePage />,
      meta: { label: '线下转账', key: '/member/offline' },
    },
  ],
};

export default member;
